<!-- 奥铃官网       首页开始 -->
<!doctype html>
<html lang="en">
<head>
	{include file="public/resource" /}
	<link rel="stylesheet" href="__INDEX__/css/cpdg.css">
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=I5g6BoXhoFL3ZBfN8xkqGQHXrHtaLvPi"></script>
</head>
<body>
 {include file="public/header" /}
<!-- header -->
<div id="container">
		<!-- banner -->
<!-- 		<div class="swiper-container swiper-container1" style="">
		    <div class="swiper-wrapper swiper-wrapper1">
		        <div class="swiper-slide swiper-slide1"><a href=""><img src="__INDEX__/img/cpdg/banner.jpg" alt="" class="scale-big"></a></div>
		    </div>
		</div> -->

		<!-- 导购说明-->
		<img src="__INDEX__/img/cpdg/dgsm.png" alt=""  class="dgsm">


		<!-- 导购说明   图 -->
		<img src="__INDEX__/img/cpdg/dg-img.jpg" alt="" class="dg-img">

		<!-- 定制 -->
		<a href="/index/product/made.html"><img src="__INDEX__/img/cpdg/dz.png" alt="" class="dzdz"></a>

		<!-- 经销商查询-->
		<img src="__INDEX__/img/cpdg/jxs.png" alt=""  class="jxs">

		<!-- 地图  -->
		<div class="map">
			<!-- 地图 -->
			<div id="allmap" style="width:60%;height:100%;margin: 0 auto;"></div>
			<!-- 留资 -->
			<div class="map-r">
				<div class="lz layui-form">
					<div class="provice coms">
						<span>省份:</span>
						<select name="province" id="province" lay-filter="getCity" lay-verify="province">
						<option value="0">请选择省份</option>
						{foreach name="province" item="vc" }
						<option value="{$vc['id']}">{$vc['name']}</option>
						{/foreach}
						</select>
					</div>
					<div class="city coms">
						<span>城市:</span>
						<select value="city" name="city" id="city" lay-filter="getJxs" lay-verify="city">
						<option value="0">请选择城市</option>
						</select>
					</div>
<!-- 					<div class="county coms">
						<span>区县:</span>
						<select name="" id="">
							<option value="0">请选择</option>
						</select>
					</div> -->
				</div>

				<div class="contai">
					<div class="list">
						<h3></h3>
						<h4></h4>
						<h4></h4>
					</div>
				</div>
			</div>
		</div>
</div>
<input type="hidden" value="" id="weis"/>
<input type="hidden" value="" id="jings"/>
{include file="public/footer" /}
<!-- footer -->
<script>
// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
var myGeo = new BMap.Geocoder();//百度地图  多点标记
var keyword;//百度地图  多点标记
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
	mapTypes:[
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
    ]}));	  
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小


var heig = $('body').height();
var bi = 1000/heig;
var bis = bi.toFixed(2);
window.onload = function(){
	$('html,body').animate({scrollTop:heig*bis},'10');
}
layui.use('form', function(){
  var form = layui.form;
  
  //各种基于事件的操作，下面会有进一步介绍
					form.on('select(getCity)', function (data) {
						province = $(this).text();
						$.ajax({
							type: 'POST',
							dataType: 'json',
							url: '{:url('Testdrive/getCity')}',
							data: {
								province: data.value,
							},
							success: function (data) {
								var quname_html = "<option value='0'>请选择城市</option>";
								for (var i = 0; i < data.length; i++) {
									quname_html += "<option value='" + data[i].id + "'>" +
										data[i].name + "</option>";
								}
								$("#city").html(quname_html);
								form.render();
							}
						});
					});


					form.on('select(getJxs)', function (data) {
						city = $(this).text();
						$.ajax({
							type: 'POST',
							dataType: 'json',
							url: '{:url('Testdrive/getjxs')}',
							data: {
								city: data.value,
							},
							success: function (data) {
								index = 0;//百度地图  多点标记
					            var arr=[];//百度地图  多点标记
								var quname_html = "<option value='0'>请选择经销商</option>";
								$('.list').empty();
								for (var i = 0; i < data.length; i++) {
									arr.push(data[i].name);//百度地图  多点标记
									quname_html += "<option value='" + data[i].id + "'>" +
										data[i].name + "</option>";

									var contai = $('<h3>'+data[i].name+'</h3><h4>地址：'+data[i].jsxdz+'</h4><h4>电话：'+data[i].phone+'</h4>');
									$('.list').append(contai);
								}
								$("#jxs").html(quname_html);
								form.render();
								map.clearOverlays();//百度地图  多点标记
					            keyword = arr;//百度地图  多点标记
					            bdGEO();//百度地图  多点标记
							}
						});
					});

					form.on('select(jxs)', function (data) {
						jxs = $(this).text();

					});
					//自定义验证规则  
					form.verify({
						province: function (value) {
							if (value == 0) {
								return '请选择省份';
							}
						},
						city: function (value) {
							if (value == 0) {
								return '请选择城市';
							}
						},
						jxs: function (value) {
							if (value == 0) {
								return '请选择经销商';
							}
						},
						phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']
					});
});


//百度地图  多点标记   START.................................................
function bdGEO(){
    var add = keyword[index];
    geocodeSearch(add);
    index++;
}
function geocodeSearch(add){
    if(index < keyword.length){
        setTimeout(function(){
            bdGEO();
        },400)
    } 
    myGeo.getPoint(add, function(point){
        if (point) {
            console.log(point);
            var address = new BMap.Point(point.lng, point.lat);
            addMarker(point);
            // addMarker(address,new BMap.Label(index+":"+add,{offset:new BMap.Size(20,-10)}));
        }
    }, "");
}
function addMarker(point,label){
    var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
    map.centerAndZoom(point, 13);
    map.addOverlay(marker);
}
//百度地图   END.................................................
</script>
</body>
</html>